<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="main"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/echarts/echarts2.js"></script>
<script src="../js/gAjax.js"></script>
<script src="../js/fos.tree.js"></script>

<script type="text/javascript">
    /*全屏大小*/
    $("#main").width(document.body.offsetWidth);
    $("#main").height(document.body.offsetHeight);
    var keyword = getUrlParam("keyword").toLowerCase();
    var chart;
    var allData = [];
    var f_data = [];
	var jsData = {};
	var sName = " ";
    $.ajaxSettings.async = false;

    var efCountMap = {};

    /**
    *  这个去掉
    */
    /* $.get("fosEcount.json", function (data) {
        $.each(data, function (index, item) {
            efCountMap[item.pname] = item.ecount;
        })
    }); */

    /**
    * 查询后台, allData, efCountMap
    */
    //$.get("fos.json", function (data) {
        //allData = data;
        jsData = toTreeOne(keyword,true);
        
        if(jsData.isChi) {
        	sName = keyword;
        }
        f_data = jsData.tData;
        
        /* require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        }); */
        
        require(['echarts', 'echarts/chart/tree'], function (ec) {
            chart = ec.init($("#main")[0]);
            chart.setOption(option);
            chart.on("click", clickFun2);
        });


        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}',
                hideDelay: 0
            },
            series: [{
                name: '树图',
                type: 'tree',
                orient: 'horizontal', // vertical horizontal
                rootLocation: {x: '10%', y: '60%'}, // 根节点位置  {x: 'center',y: 10}
                nodePadding: 17, //智能定义全局最小节点间距，不能定义层级节点间距，有点搓。
                layerPadding: 500,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#4883b4',
                        label: {
                            show: true,
                            formatter: "{b}",
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                },
                roam: true,
                data: [{
                    name: sName,
                    value: 6,
                    cusField: 'category',
                    children: f_data
                }] 
            }]
        };

    //});
    //关键点！
    //显示的图片是否有子节点以及是否收缩了建议用不同的symbol图片（不直接使用的图片预加载过来）
    function clickFun2(param) {
        if (!(param.data.children && param.data.children.length > 0)) {
            if (param.data.children_bak) {
                param.data.children = param.data.children_bak;
            }
            else {
                var dr = toTreeOne(param.data.name,false); //, allData, efCountMap
                param.data.children = dr.tData; //[deepCopy(mockData1),deepCopy(mockData2)]; //加载数据，此处用测试数据
            }
        } else {
            param.data.children_bak = param.data.children;
            param.data.children = []; //root节点会在refresh时读children的length
        }
        chart.refresh(); //一定要refresh，否则不起作用
    }

</script>
</body>
</html>